<template>
  <div class="list-table">
    <div class=" area-header">
      <span class="area-header-title">{{ $t('间接项目穿透') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('投资主体类型')" prop="investmentType">
        <el-select v-model="queryParams.investmentType" :clearable="true" filterable :placeholder="$t('投资主体类型')" @keyup.enter.native="queryHandle">
          <el-option
            v-for="item in dealTypeOptions"
            :key="item.id"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('主体名称')" prop="investmentName">
        <MainBodySelect
          v-model="queryParams.investmentName"
          :parameters="queryParams.investmentType"
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('项目名称')" prop="indirectProjectName">
        <el-input v-model="queryParams.indirectProjectName" size="small" :placeholder="$t('项目名称')" @keyup.enter.native="queryHandle" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
        <el-button
          v-has-permi="['report:indirect:exportReport']"
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="exportHandle"
        >{{ $t("导出") }}</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" tooltip-effect="darkTable" :data="listData" border>
      <el-table-column :label="$t('序号')" fixed="left" type="index" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('项目名称')" fixed="left" align="center" prop="indirectProjectName" :show-overflow-tooltip="true" min-width="180">
        <template slot-scope="scope">
          <router-link
            target="_blank"
            :to="{path:'/company/base/companyBaseHome',query:{companyId:scope.row.companyId, dealId:scope.row.dealId, source:'BF_PORTFOLIO'}}"
            class="link_a pad10"
          >{{ scope.row.indirectProjectName }}</router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('投资主体')" fixed="left" align="center" prop="investmentName" min-width="180">
        <template slot-scope="scope">
          <router-link
            v-if="scope.row.investmentType === 'fund'"
            target="_blank"
            :to="{path:'/fund/fundBasehome',query:{id:scope.row.investorId}}"
            class="link_a"
          >{{ scope.row.investmentName }}</router-link>
          <router-link
            v-else-if="scope.row.investmentType === 'manager'"
            target="_blank"
            :to="{ path:'/fund/gpBase/gpBaseHome',query:{ id:scope.row.investmentId }}"
            class="link_a"
          >{{ scope.row.investmentName }}</router-link>
          <router-link
            v-else-if="scope.row.investmentType === 'internal'"
            target="_blank"
            :to="{path:'/fund/internal/internalBaseHome',query:{id:scope.row.investmentId}}"
            class="link_a"
          >{{ scope.row.investmentName }}</router-link>
          <el-link v-else type="primary" :underline="false" style="font-weight: 400;">{{ scope.row.investmentName }}</el-link>
        </template>
      </el-table-column>
      <!--      <el-table-column :label="$t('SPV')" fixed="left" prop="spvName" align="center" min-width="150">-->
      <!--        <template slot-scope="scope">-->
      <!--          <div v-for="(item, index) in scope.row.indirectReportVoList" :key="new Date().getTime() + '_' + index" class="multi-table-td">-->
      <!--            <div>{{ item.spvName }}</div>-->
      <!--          </div>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column :label="$t('参股基金名称')" fixed="left" prop="dealName" align="center" min-width="180">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.indirectReportVoList" :key="new Date().getTime() + '_' + index" class="multi-table-td">
            <div>
              <router-link
                target="_blank"
                :to="{path:'/deal/home/dealBaseHome',query:{id:item.dealId,dealType: 'bf'}}"
                class="link_a"
              >{{ item.dealName }}</router-link>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('投资主体对子基金投资金额') + $t('金额单位')" prop="investmentAmount" align="center" min-width="200">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.indirectReportVoList" :key="new Date().getTime() + '_' + index" class="multi-table-td">
            <div :class="item.sumFlag ? 'bold' : '' "><span class="money-text">{{ moneyFormat(item.investmentAmount, 'w') }}</span></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('投资主体穿透后对项目投资金额') + $t('金额单位')" prop="" align="center" min-width="200">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.indirectReportVoList" :key="new Date().getTime() + '_' + index" class="multi-table-td">
            <div :class="item.sumFlag ? 'bold' : '' "><span class="money-text">{{ moneyFormat(item.projectInvestmentAmount, 'w') }}</span></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('投资主体对子基金认缴比例(%)')" prop="" align="center" min-width="200">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.indirectReportVoList" :key="new Date().getTime() + '_' + index" class="multi-table-td">
            <div v-if="item.sumFlag"> 一 </div>
            <div v-else>{{ moneyFormat(item.investmentRate, 'rate') }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('投资主体穿透后对项目持股比例(%)')" prop="" align="center" min-width="210">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.indirectReportVoList" :key="new Date().getTime() + '_' + index" class="multi-table-td">
            <div :class="item.sumFlag ? 'bold' : '' ">{{ moneyFormat(item.projectInvestmentRate, 'rate') }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('投资时间')" prop="" align="center" min-width="150">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.indirectReportVoList" :key="new Date().getTime() + '_' + index" class="multi-table-td">
            <div v-if="item.sumFlag"> 一 </div>
            <div v-else>{{ parseTime(item.investmentTime) }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('协议金额') + $t('金额单位')" prop="" align="center" min-width="150">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.indirectReportVoList" :key="new Date().getTime() + '_' + index" class="multi-table-td">
            <div :class="item.sumFlag ? 'bold' : '' "><span class="money-text">{{ moneyFormat(item.agreementAmount, 'w') }}</span></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('投资金额') + $t('金额单位')" prop="" align="center" min-width="150">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.indirectReportVoList" :key="new Date().getTime() + '_' + index" class="multi-table-td">
            <div v-if="item.sumFlag || item.sumFlag === 'true'" :class="item.sumFlag ? 'bold' : '' "><span class="money-text">{{ moneyFormat(item.investmentBfAmount, 'w') }}</span></div>
            <div v-else class="link-type" style="font-weight: 400;" @click="bfInvestGroupInfoMethod(item)"><span class="money-text">{{ moneyFormat(item.investmentBfAmount, 'w') }}</span></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('持股比例(%)')" prop="" align="center" min-width="150">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.indirectReportVoList" :key="new Date().getTime() + '_' + index" class="multi-table-td">
            <div v-if="item.sumFlag"> 一 </div>
            <div v-else>{{ moneyFormat(item.investmentBfRate, 'rate') }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('公司整体估值') + $t('金额单位')" prop="" align="center" min-width="150">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.indirectReportVoList" :key="new Date().getTime() + '_' + index" class="multi-table-td">
            <div :class="item.sumFlag ? 'bold' : '' "><span class="money-text">{{ moneyFormat(item.companyValue, 'w') }}</span></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('项目估值') + $t('金额单位')" prop="" align="center" min-width="150">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.indirectReportVoList" :key="new Date().getTime() + '_' + index" class="multi-table-td">
            <div v-if="item.sumFlag || item.sumFlag === 'true'" :class="item.sumFlag ? 'bold' : '' "><span class="money-text">{{ moneyFormat(item.projectValue, 'w') }}</span></div>
            <div v-else class="link-type" style="font-weight: 400;" @click="companyProjectValuationMethod(item)"><span class="money-text">{{ moneyFormat(item.projectValue, 'w') }}</span></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('已回收金额') + $t('金额单位')" prop="" align="center" min-width="150">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.indirectReportVoList" :key="new Date().getTime() + '_' + index" class="multi-table-td">
            <div v-if="item.sumFlag || item.sumFlag === 'true'" :class="item.sumFlag ? 'bold' : '' "><span class="money-text">{{ moneyFormat(item.recoveryAmount, 'w') }}</span></div>
            <div v-else class="link-type" style="font-weight: 400;" @click="companyProjectMoneybackMethod(item)"><span class="money-text">{{ moneyFormat(item.recoveryAmount, 'w') }}</span></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('已回收成本') + $t('金额单位')" prop="" align="center" min-width="150">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.indirectReportVoList" :key="new Date().getTime() + '_' + index" class="multi-table-td">
            <div :class="item.sumFlag ? 'bold' : '' "><span class="money-text">{{ moneyFormat(item.recoveryCost, 'w') }}</span></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('已实现收益') + $t('金额单位')" prop="" align="center" min-width="150">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.indirectReportVoList" :key="new Date().getTime() + '_' + index" class="multi-table-td">
            <div :class="item.sumFlag ? 'bold' : '' "><span class="money-text">{{ moneyFormat(item.realizedIncome, 'w') }}</span></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('未退出成本') + $t('金额单位')" prop="" align="center" min-width="150">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.indirectReportVoList" :key="new Date().getTime() + '_' + index" class="multi-table-td">
            <div :class="item.sumFlag ? 'bold' : '' "><span class="money-text">{{ moneyFormat(item.notExitCost, 'w') }}</span></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('未实现收益/损失') + $t('金额单位')" prop="" align="center" min-width="150">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.indirectReportVoList" :key="new Date().getTime() + '_' + index" class="multi-table-td">
            <div :class="item.sumFlag ? 'bold' : '' "><span class="money-text">{{ moneyFormat(item.unrealizedIncome, 'w') }}</span></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" fixed="right" align="center" class-name="small-padding fixed-width" width="120">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            icon="el-icon-view"
            @click="dealProjectPenetrationView(scope.row)"
          >{{ $t('穿透图') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog :title="$t('投资金额')" :visible.sync="bfInvestGroupInfoOpen" :close-on-click-modal="false" custom-class="folderOpen" :lock-scroll="false" append-to-body>
      <bfInvestGroupInfoList ref="bfInvestGroupInfoList" />
    </el-dialog>
    <el-dialog :title="$t('项目估值')" :visible.sync="companyProjectValuationOpen" :close-on-click-modal="false" custom-class="folderOpen" :lock-scroll="false" append-to-body>
      <companyProjectValuationList ref="companyProjectValuationList" />
    </el-dialog>
    <el-dialog :title="$t('项目回款')" :visible.sync="companyProjectMoneybackOpen" :close-on-click-modal="false" custom-class="folderOpen" :lock-scroll="false" append-to-body>
      <companyProjectMoneybackList ref="companyProjectMoneybackList" />
    </el-dialog>
    <el-dialog v-if="forceComponentOpen" :title="$t('项目穿透图')" :visible.sync="forceComponentOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <forceComponent ref="forceComponent" :bus-data="forceData" />
    </el-dialog>
  </div>
</template>

<script>
import { findList } from '@/api/bf/IndirectProjectPenetration/IndirectProjectPenetration'
import MainBodySelect from '@/components/MainBodySelect/index'
import bfInvestGroupInfoList from '@/views/bf/investGroup/bfInvestGroupInfoList.vue'
import companyProjectValuationList from '@/views/company/projectVal/companyProjectValuationList.vue'
import companyProjectMoneybackList from '@/views/company/moneyback/companyProjectMoneybackList.vue'
import forceComponent from '@/components/Deal/forceComponent.vue'
import { downLoadFileOpen } from '@/utils/zipdownload'
export default {
  components: {
    MainBodySelect,
    bfInvestGroupInfoList,
    companyProjectValuationList,
    companyProjectMoneybackList,
    forceComponent
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      listData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        investmentType: undefined,
        investmentName: undefined,
        indirectProjectName: undefined
      },
      dealTypeOptions: [],
      bfInvestGroupInfoOpen: false,
      companyProjectValuationOpen: false,
      companyProjectMoneybackOpen: false,
      forceComponentOpen: false,
      forceData: undefined
    }
  },
  created() {
    this.getList()
    this.getDicts('deal_investment_type').then(response => {
      response.data.forEach(item => {
        if (item.dictValue !== 'hhqy') {
          this.dealTypeOptions.push({
            dictLabel: item.dictLabel,
            dictValue: item.dictValue
          })
        }
      })
    })
  },
  methods: {
    /** 查询出差申请列表 */
    getList() {
      this.loading = true
      findList(this.queryParams).then(response => {
        this.listData = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.indirectProjectName = undefined
      this.queryParams.investmentName = undefined
      this.queryParams.investmentType = undefined
      this.resetForm('queryForm')
      this.queryHandle()
    },
    // 投资金额
    bfInvestGroupInfoMethod(row) {
      console.log(row)
      this.bfInvestGroupInfoOpen = true
      this.$nextTick(() => {
        this.$refs.bfInvestGroupInfoList.showTitle = false
        this.$refs.bfInvestGroupInfoList.queryParams.dealId = row.dealId
        this.$refs.bfInvestGroupInfoList.queryParams.companyId = row.companyId
        this.$refs.bfInvestGroupInfoList.getList()
      })
    },
    // 项目估值
    companyProjectValuationMethod(row) {
      this.companyProjectValuationOpen = true
      this.$nextTick(() => {
        this.$refs.companyProjectValuationList.showTitle = false
        this.$refs.companyProjectValuationList.queryParams.dealId = row.dealId
        this.$refs.companyProjectValuationList.queryParams.companyId = row.companyId
        this.$refs.companyProjectValuationList.getList()
      })
    },
    // 回款
    companyProjectMoneybackMethod(row) {
      this.companyProjectMoneybackOpen = true
      this.$nextTick(() => {
        this.$refs.companyProjectMoneybackList.showTitle = false
        this.$refs.companyProjectMoneybackList.queryParams.dealId = row.dealId
        this.$refs.companyProjectMoneybackList.queryParams.companyId = row.companyId
        this.$refs.companyProjectMoneybackList.getList()
      })
    },
    dealProjectPenetrationView(row) {
      this.forceData = { busId: row.companyId, busType: 'company', busName: row.indirectProjectName }
      this.forceComponentOpen = true
    },
    exportHandle() {
      var _this = this
      const query = this.queryParams
      this.$confirm(this.$t('是否确认导出?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(function() {
        // indirectProjectName investmentName  investmentType
        var indirectProjectName = _this.isEmpty(query.indirectProjectName) ? '' : query.indirectProjectName
        var investmentName = _this.isEmpty(query.investmentName) ? '' : query.investmentName
        var investmentType = _this.isEmpty(query.investmentType) ? '' : query.investmentType
        var param = '?indirectProjectName=' + indirectProjectName + '&investmentName=' + investmentName + '&investmentType=' + investmentType
        return downLoadFileOpen('/report/indirect/exportReport' + param)
      }).catch(function() {
      })
    }
  }
}
</script>
<style scoped lang="scss">
/deep/ .el-table .cell.el-tooltip {
  white-space: nowrap;
  min-width: 50px;
  width: 100%;
  padding: 0 0 0 0;
  margin-bottom: -13px !important;
  margin-top: -12px !important;
}

table{
  border-collapse: collapse;
  border: 0 solid #dfe6ec;
}
table td {
  border-top: 0;
  /*border-bottom: 1px solid #dfe6ec;*/
  border-left: 0;
}
table tr.lastrow td {
  border-bottom: 0;
}
/deep/ td.el-table__cell{
  padding: 0!important;
  .pad10{
    padding: 0 10px;
  }
}
.multi-table-td {
  margin: 0 -10px;
  div{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 10px;
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #dfe6ec;
  }
  &:last-child{
    div{
      border: 0;
    }
  }
}
.bold{
  font-weight: bold;
  // background-color: #f5f7fa;
}
</style>
